---
type: integration
title: '@astrojs/tailwind'
description: Aprenda como usar a integração @astrojs/tailwind em seu projeto Astro.
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/tailwind/'
category: other
i18nReady: true
---

Esta **[integração Astro][astro-integration]** traz as classes CSS utilitárias do [Tailwind](https://tailwindcss.com/) para todos os arquivos `.astro` e [componentes de framework](/pt-br/guides/framework-components/) em seu projeto, juntamente com suporte para o arquivo de configuração do Tailwind.

## Por que Tailwind?

O Tailwind permite que você use classes de utilitário em vez de escrever CSS. Essas classes de utilitário são na maioria das vezes equivalentes a uma determinada configuração de propriedade CSS: por exemplo, adicionar `text-lg` a um elemento é equivalente a definir `font-size: 1.125rem` em CSS. Você pode achar mais fácil escrever e manter seus estilos usando essas classes de utilitário predefinidas!

Se você não gostar dessas configurações predefinidas, pode [personalizar o arquivo de configuração do Tailwind](https://tailwindcss.com/docs/configuration) de acordo com os requisitos de design do seu projeto. Por exemplo, se o "texto maior" em seu design for na verdade `2rem`, você pode [alterar a propriedade `fontSize` de `lg`](https://tailwindcss.com/docs/font-size#customizing-your-theme) para `2rem`.

O Tailwind também é uma ótima escolha para adicionar estilos a componentes React, Preact ou Solid, que não suportam uma tag `<style>` no arquivo do componente.

Nota: geralmente não é recomendado usar tanto o Tailwind quanto outro método de estilização (por exemplo, Styled Components) no mesmo arquivo.

### Instalação Rápida

O comando `astro add` automatiza a instalação para você. Execute um dos seguintes comandos em uma nova janela do terminal. (Se você não tem certeza de qual gerenciador de pacotes está usando, execute o primeiro comando.) Em seguida, siga as instruções e digite "y" no terminal (significando "sim") para cada um.

```sh
# Usando NPM
npx astro add tailwind
# Usando Yarn
yarn astro add tailwind
# Usando PNPM
pnpm astro add tailwind
```

Se encontrar algum problema, [sinta-se à vontade para relatar no GitHub](https://github.com/withastro/astro/issues) e tente as etapas de instalação manual abaixo.

### Instalação Manual

Primeiro, instale os pacotes `@astrojs/tailwind` e `tailwindcss` usando seu gerenciador de pacotes. Se você estiver usando npm ou não tiver certeza, execute isso no terminal:

```sh
npm install @astrojs/tailwind tailwindcss
```

Então, adicione essa integração em seu arquivo `astro.config.*` dentro da propriedade `integrations`:

```diff lang="js" "tailwind()"
  // astro.config.mjs
  import { defineConfig } from 'astro/config';
+ import tailwind from '@astrojs/tailwind';

  export default defineConfig({
    // ...
    integrations: [tailwind()],
    //             ^^^^^^^^^^
  });
```

Agora, crie o arquivo `tailwind.config.cjs` na raiz do seu projeto. Você pode usar o seguinte comando para criar uma configuração básica:

```sh
npx tailwindcss init
```

Finalmente, adicione essa configuração em seu arquivo `tailwind.config.cjs`:

```diff lang="js" "content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}']"
  // tailwind.config.cjs
  /** @type {import('tailwindcss').Config} */
  module.exports = {
+   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
      extend: {},
    },
    plugins: [],
  };
```

## Utilização

Quando instalar a integração, as classes utilitárias do Tailwind já devem estar prontas para uso. Acesse a [documentação do Tailwind](https://tailwindcss.com/docs/utility-first), para aprender como usá-lo corretamente, e se achar uma classe utilitária que deseja usar, adicione ela em qualquer elemento HTML em seu projeto!

O [Autoprefixer](https://github.com/postcss/autoprefixer) é automaticamente adicionado quando estiver trabalhando no modo de desenvolvimento e em builds para produção, fazendo com que as classes do Tailwind funcionem em navegadores antigos.

## Configuração

### Configurando o Tailwind

Se você seguiu as instruções de Instalação Rápida e respondeu "sim" para todas, verá um arquivo `tailwind.config.cjs` na raiz do seu projeto. Use este arquivo para fazer alterações na configuração do Tailwind. Você pode aprender como personalizar o Tailwind utilizando esse arquivo na [documentação oficial](https://tailwindcss.com/docs/configuration).

Se o arquivo não estiver lá, você pode adicionar seu próprio arquivo `tailwind.config.(js|cjs|mjs)` na raiz do projeto, e a integração usará suas configurações. Isso pode ser ótimo se você já configurou o Tailwind em outro projeto e deseja trazer essas configurações para este.

### Configurando a Integração

A integração Astro Tailwind lida com a comunicação entre o Astro e o Tailwind e tem suas próprias opções. Altere essas opções no arquivo `astro.config.mjs` (não no arquivo de configuração do Tailwind), que é onde ficam as configurações de integração do seu projeto.

#### configFile

Anteriormente chamado de `config.path` no `@astrojs/tailwind` v3. Mais informações no [histórico de mudanças da v4](https://github.com/withastro/astro/blob/main/packages/integrations/tailwind/CHANGELOG.md#400) para atualizar suas configurações.


Se você desejar usar um arquivo de configuração do Tailwind diferente do `tailwind.config.(js|cjs|mjs)` padrão, adicione a localização do arquivo usando a opção `configFile` da integração. Se o `configFile` é relativo, ele vai ser resolvido relativamente a partir do diretório de trabalho atual.

:::caution
Não é recomendado a alteração desse valor uma vez que isso pode causar problemas a outras ferramentas que integrem com o Tailwind, como por exemplo a extensão oficial do Tailwind para o VSCode.
:::

```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [
    tailwind({
      // Examplo: Adiciona uma caminho customizado para um arquivo de configuração Tailwind
      configFile: './custom-config.cjs',
    }),
  ],
});
```

#### applyBaseStyles

Anteriormente chamado de `config.applyBaseStyles` no `@astrojs/tailwind` v3. Veja mais no [histórico de mudanças da v4](https://github.com/withastro/astro/blob/main/packages/integrations/tailwind/CHANGELOG.md#400) para atualizar sua configuração.

Por padrão, a integração importa um arquivo basico `base.css` em cada página do seu projeto. Esse arquivo CSS basico inclui as três diretivas principais do `@tailwind`:
```css
/* O arquivo base.css injetado por padrão pela integração */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Para desabilitar esse comportamento padrão, configure o valor de `applyBaseStyles` para `false`. Isso pode ser útil em caso você deseje seu próprio arquivo `base.css` (para incluir a [diretiva `@layer`](https://tailwindcss.com/docs/functions-and-directives#layer), por exemplo). Além disso, outra utilidade é caso você não deseje que o arquivo `base.css` seja importado em cada página do seu projeto.

```js
// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [
    tailwind({
      // Exemplo: Desativa a injeção do arquivo básico `base.css` em cada página.
      // Útil se você precisa definir e/ou importar seu próprio arquivo `base.css` customizado.
      applyBaseStyles: false,
    }),
  ],
});
```

Você pode agora [importar seu próprio `base.css` como um folha de estilos local](/pt-br/guides/styling/#importe-uma-folha-de-estilos-local).

## Exemplos

* O template [Astro Tailwind Starter](https://github.com/withastro/astro/tree/latest/examples/with-tailwindcss?on=github) te ajuda a começar com uma base para o seu projeto que utiliza o Tailwind para estilização.
*   A página inicial do Astro utiliza o Tailwind. Confira seu [arquivo de configuração do Tailwind](https://github.com/withastro/astro.build/blob/main/tailwind.config.ts) ou um [exemplo de componente](https://github.com/withastro/astro.build/blob/main/src/components/Checkbox.astro).
* Os temas [Astro Ink](https://github.com/one-aalam/astro-ink), [Sarissa Blog](https://github.com/iozcelik/SarissaBlogAstroStarter) e [Creek](https://github.com/robertguss/Astro-Theme-Creek) utilizam o Tailwind para estilização.
*   [Navegue pelos projetos Astro Tailwind no GitHub](https://github.com/search?q=%22%40astrojs%2Ftailwind%22%3A+path%3A%2Fpackage.json\&type=code) para mais exemplos!

## Solução de problemas

### Classe não existe com diretivas `@apply`

Ao usar a diretiva `@apply` em um componente Astro, Vue, Svelte ou outra integração de componente dentro da tag `<style>`, ela pode gerar erros sobre a não existência da sua classe personalizada do Tailwind e fazer com que a build falhe.

```sh
error   The `text-special` class does not exist. If `text-special` is a custom class, make sure it is defined within a `@layer` directive.
```

[Em vez de usar diretivas `@layer` em uma folha de estilo global](https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css), defina seus estilos personalizados adicionando um plugin ao seu arquivo de configuração do Tailwind para corrigir isso:

```js
// tailwind.config.cjs
module.exports = {
  // ...
  plugins: [
    function ({ addComponents, theme }) {
      addComponents({
        '.btn': {
          padding: theme('spacing.4'),
          margin: 'auto',
        },
      });
    },
  ],
};
```

### Modificadores baseados em classe não funcionam com diretivas `@apply`

Certas classes do Tailwind com modificadores dependem da combinação de classes em vários elementos. Por exemplo, `group-hover:text-gray` é compilado para `.group:hover .text-gray`. Quando isso é usado com a diretiva `@apply` em tags `<style>` do Astro, os estilos compilados são removidos da saída de compilação porque não correspondem a nenhuma marcação no arquivo `.astro`. O mesmo problema também pode ocorrer em componentes de framework que suportam estilos isolados, como Vue e Svelte.

Para corrigir isso, você pode usar classes incorporadas em vez disso:


```html
<p class="text-black group-hover:text-gray">Astro</p>
```

### Outros

*   Se a sua instalação não parecer estar funcionando, tente reiniciar o servidor de desenvolvimento.
*   Se você editar e salvar um arquivo e não ver o seu site atualizar de acordo, tente recarregar a página.
*   Se recarregar a página não atualizar a visualização, ou se uma nova instalação não parecer estar funcionando, reinicie o servidor de desenvolvimento.

Para obter ajuda, confira o canal `#support` no [Discord](https://astro.build/chat). Os membros da nossa amigável equipe de suporte estão aqui para ajudar!

Você também pode conferir nossa [Documentação de Integração do Astro][astro-integration] para mais informações sobre integrações.

[astro-integration]: /pt-br/guides/integrations-guide/

[astro-ui-frameworks]: /pt-br/guides/framework-components/#usando-componentes-de-frameworks

## Contribuição

Este pacote é mantido pela equipe principal do Astro. Você é bem-vindo para enviar uma issue ou PR!

## Histórico de alterações

Veja [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/tailwind/CHANGELOG.md) para ver o histórico de alterações desta integração.
